<%--
  Created by IntelliJ IDEA.
  User: asd73
  Date: 2017/9/21
  Time: 22:54
  To change this template use File | Settings | File Templates.
  jq控制html的内容
--%>

<%--jq的选择器--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery.js"></script>
<%--    <style type="text/css">
        div{width: 300px; height: 300px;background: pink;}
    </style>--%>
    <script type="text/javascript">
        $(function (e) {
            $('#b').click(function () {
                //$('.ul01 li:first').css('background','pink' );//过滤出第一个
                //$('.ul01 li:last').css('background','pink' );//过滤出第二个
                //$('.ul01 li:not(.myclass02)').css('background','pink' );
                //$('.ul01 li:eq(0)').css('background','pink' );//按索引值过滤
                $('.ul01 li:gt(2)').css('background','pink' );//过滤大于2的标签
                //$('.ul01 li:lt(2)').css('background','pink' );//过滤小于2的标签

            })
        });
    </script>
</head>
<body>
    <button id="b">按钮</button>
    <br>
    <p class="myclass">这是一个段落</p>
    <p>这是一个段落</p>
    <div class="myclass">这是一个盒子</div>
    <h1>diyige</h1>
    <h2>dierge</h2>
    <h3>disange</h3>
    <ul class="ul01">
        <li class="myclass01">第一级li
            <ul>
                <li>第二级li</li>
                <li>第二级li</li>
                <li>第二级li</li>
                <li class="myclass01">第二级22222</li>
                <li class="myclass01">第二级33333</li>
            </ul>
        </li>
        <li class="myclass02">第一级2</li>
        <li class="myclass03">第一级3</li>
        <li class="myclass03">第一级3</li>
        <li class="myclass03">第一级3</li>
        <li class="myclass03">第一级3</li>
    </ul>
    <div class="da">老爷子
        <div class="zhong">大儿子
            <div class="xiao">大孙子</div>
        </div><br/><br/>
        <div class="zhong">二儿子
            <div class="xiao">二孙子</div>
        </div><br/><br/>
        <div class="zhong">三儿子
            <div class="xiao">三孙子</div>
        </div><br/><br/>
    </div>
</body>
</html>
